<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">文章管理</a>
        </li>

        <li>
            <a href="#">栏目管理</a>
        </li>

    </ul>
    <!-- /.breadcrumb -->

</div>

<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
    <!-- /section:settings.box -->
    <div class="page-content-area">
        <div class="page-header">
            <button class="btn btn-sm btn-success btn-info" id="id-btn-dialog2">新增栏目</button>

            <!--隐藏层-->
            <div id="dialog-addColumn" class="hide dialog-user-add">
                <table>
                    <tr>
                        <td>
                            栏目名称
                        </td>
                        <td>
                            <input type="text">
                        </td>
                    </tr>
                </table>
                <p>栏目描述</p>

                <p>
                    <textarea style="width:465px;"></textarea>
                </p>
            </div>
            <!-- #dialog-message -->


        </div>
        <!-- /.page-header -->

        <div class="row">

            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>

                        <th>序号</th>
                        <th>栏目名称</th>
                        <th>栏目描述</th>
                        <th>删除</th>
                        <th>修改</th>
                        <th>冻结</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td class="center">
                            1
                        </td>

                        <td>
                            WEB前端
                        </td>
                        <td>
                            WEB前端相关文章
                        </td>
                        <td>
                            <button class="btn btn-warning btn-xs">
                                <i class="ace-icon glyphicon glyphicon-trash"></i>
                            </button>
                        </td>
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <button class="btn btn-xs btn-purple update">
                                    <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                                    修改
                                </button>
                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline position-relative">
                                    <button class="btn btn-minier btn-purple dropdown-toggle"
                                            data-toggle="dropdown" data-position="auto">
                                        <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td class="hidden-480">
                            <label>
                                <input name="switch-field-1" class="ace ace-switch ace-switch-4"
                                       type="checkbox">
                                <span class="lbl"></span>
                            </label>
                        </td>

                    </tr>
                    <tr>
                        <td class="center">
                            2
                        </td>

                        <td>
                            WEB后端
                        </td>
                        <td>
                            WEB后端相关文章
                        </td>
                        <td>
                            <button class="btn btn-warning btn-xs">
                                <i class="ace-icon glyphicon glyphicon-trash"></i>
                            </button>
                        </td>
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <button class="btn btn-xs btn-purple update">
                                    <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                                    修改
                                </button>
                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline position-relative">
                                    <button class="btn btn-minier btn-purple dropdown-toggle"
                                            data-toggle="dropdown" data-position="auto">
                                        <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td class="hidden-480">
                            <label>
                                <input name="switch-field-1" class="ace ace-switch ace-switch-4"
                                       type="checkbox">
                                <span class="lbl"></span>
                            </label>
                        </td>

                    </tr>


                    </tbody>
                </table>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.page-content-area -->
</div><!-- /.page-content -->
<script type="text/javascript">

     var oTable1 =
                $('#sample-table-1')
                    //.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
                        .dataTable({
                            bAutoWidth: false,
                            "aoColumns": [
                                {"bSortable": false},
                                null, null, null, null,
                                {"bSortable": false}
                            ],
                            "aaSorting": []

                            //,
                            //"sScrollY": "200px",
                            //"bPaginate": false,

                            //"sScrollX": "100%",
                            //"sScrollXInner": "120%",
                            //"bScrollCollapse": true,
                            //Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
                            //you may want to wrap the table inside a "div.dataTables_borderWrap" element

                            //"iDisplayLength": 50
                        });
        /**
         var tableTools = new $.fn.dataTable.TableTools( oTable1, {
					"sSwfPath": "../../copy_csv_xls_pdf.swf",
			        "buttons": [
			            "copy",
			            "csv",
			            "xls",
						"pdf",
			            "print"
			        ]
			    } );
         $( tableTools.fnContainer() ).insertBefore('#sample-table-2');
         */

    $("#id-btn-dialog2").on('click', function (e) {
        e.preventDefault();

        var dialog = $("#dialog-addColumn").removeClass('hide').dialog({
            modal: true,
            title: "<div class='widget-header widget-header-small'><h4 class='smaller'>新增栏目</h4></div>",
            title_html: true,
            width: 600,
            buttons: [
                {
                    text: "取消",
                    "class": "btn btn-xs",
                    click: function () {
                        $(this).dialog("close");
                    }
                },
                {
                    text: "确定",
                    "class": "btn btn-primary btn-xs",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });
    });
</script>
